<template>
  <a-page>
    <div slot="nav">
      <div class="row justify-between items-center">
        <div v-if="keyword" class="q-mx-sm row items-center">
          <span class="q-mr-sm text-grey-7">标签：</span>
          <h1 class="size-18 bold">{{ keyword }}</h1>
          <q-btn dense icon="close" class="q-ml-sm" @click="$router.push('/map/')" />
        </div>
        <q-tabs
          text-color="black"
          v-model="tabRecommend"
          :class="{'invisible': keyword}"
        >
          <q-tab name="1" label="推荐地图" />
          <q-tab name="0" label="全部地图" />
        </q-tabs>
        <div v-if="!keyword">
          <a-order :order="order" :ordering="ordering"></a-order>
        </div>
      </div>
    </div>
    <a-loading v-if="!querySet" :visible="loading"></a-loading>
    <a-map-image-boxes v-if="querySet" :maps="querySet"></a-map-image-boxes>
    <a-loading v-if="querySet" :visible="loading" :center="false" class="q-my-xs"></a-loading>
    <a-pagination v-if="page > 1" :page="page" :max="max"></a-pagination>
  </a-page>
</template>

<script>
import { querySetMixin } from '../components/mixin/request'

export default {
  name: 'PageMaps',
  mixins: [querySetMixin],
  props: {
    is_recommend: {
      type: String,
      required: false,
      default: '1'
    },
    ordering: {
      type: String,
      required: false,
      default: '-update_date'
    },
    keyword: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      tabRecommend: undefined,
      limit: 12,
      infinite: true,
      order: {
        '-update_date': '更新时间',
        '-add_date': '创建时间',
        '-up_number': '点赞数量',
        '-comment_number': '评论数量',
        '-read': '阅读数量'
      }
    }
  },
  created () {
    this.tabRecommend = this.is_recommend
  },
  computed: {
    api () {
      if (this.keyword) {
        return '/api/map/search/'
      } else {
        return '/api/map/'
      }
    },
    queryParams () {
      const query = {}

      if (this.page) {
        query.page = this.page
      }

      if (this.ordering && !this.keyword) {
        query.ordering = this.ordering
      }

      if (this.is_recommend && !this.keyword) {
        query.is_recommend = this.is_recommend
      }

      if (this.keyword) {
        query.search = this.keyword
        query.is_recommend = 0
      }

      return query
    }
  },
  watch: {
    tabRecommend (value) {
      this.$router.push(this.getRoute({ query: { is_recommend: value } }))
    },
    is_recommend (value) {
      this.tabRecommend = value
    }
  }
}
</script>
